<ng-container card-body-head>
  <div class="body-head mb-3">
    <div class="type-filter">
      <mat-select
        class="form-control selected"
        [ngModel]="activeAreaID"
        (ngModelChange)="onActiveAreaID($event)"
      >
        <mat-option [value]="0">全部区域</mat-option>
        <ng-container *ngIf="areaList$ | async as areaList">
          <mat-option *ngFor="let area of areaList.list" [value]="area.id">
            {{ area.name }}</mat-option
          >
        </ng-container>
      </mat-select>

      <div class="search">
        <div class="search-input">
          <input
            type="text"
            class="form-control"
            placeholder="请输入关键词..."
            [ngModel]="searchKey"
            #keyword
            (keyup.enter)="onSearchKey(keyword.value, true)"
            (blur)="onSearchKey(keyword.value, false)"
          />
        </div>
        <div>
          <button
            class="btn btn-light m-btn m-btn--icon m-btn--icon-only m-btn--pill"
            (click)="startSearch()"
          >
            <i class="flaticon-search"></i>
          </button>
        </div>
      </div>

      <div class="filter">
        <button
          class="btn ml-3"
          *ngFor="let btn of humanButtons"
          [routerLink]="btn.link"
          routerLinkActive
          #rla="routerLinkActive"
          routerLinkActive="btn-primary"
          #router="routerLinkActive"
          [class.btn-secondary]="!router.isActive"
        >
          {{ btn.name }}
        </button>
      </div>
    </div>
  </div>
</ng-container>

<router-outlet></router-outlet>
